<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>集群管理</title>
    <link href="../layui/css/layui.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
    <link href="../image/kl_logo.png" rel="icon" type="image/png">
</head>
<body>
<div class="layui-form">
    <div class="layui-input-inline">
        <button class="layui-btn layui-btn-sm" lay-filter="formSearch"
                onclick="create_cluster_click()"><i class="layui-icon layui-icon-addition"></i>创建集群
        </button>
    </div>
</div>
<div id="content">

</div>
</body>

<script id="createDialog" type="text/html">
    <form class="layui-form" name="modify" action="" style="padding: 20px;padding-bottom: 5px;"
          lay-filter="editDialogForm">
        <div class="layui-form-item" style="margin-bottom:5px">
            <label class="layui-form-label" style="padding-left: 0px;padding-right: 5px;">集群名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" placeholder="请输入集群名称" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-bottom:5px">
            <label class="layui-form-label" style="padding-left: 0px;padding-right: 5px;">CPU超配</label>
            <div class="layui-input-inline">
                <input type="text" name="overCpu" value="1.0" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-bottom:0px">
            <label class="layui-form-label" style="padding-left: 0px;padding-right: 5px;">内存超配</label>
            <div class="layui-input-inline">
                <input type="text" name="overMemory" value="1.0" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </form>
</script>
<script id="editDialog" type="text/html">
    <form class="layui-form" name="modify" action="" style="padding: 20px;padding-bottom: 5px;"
          lay-filter="editDialogForm">
        <input type="hidden" name="id"/>
        <div class="layui-form-item" style="margin-bottom:5px">
            <label class="layui-form-label" style="padding-left: 0px;padding-right: 5px;">集群名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-bottom:5px">
            <label class="layui-form-label" style="padding-left: 0px;padding-right: 5px;">CPU超配</label>
            <div class="layui-input-inline">
                <input type="text" name="overCpu" value="1.0" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-bottom:0px">
            <label class="layui-form-label" style="padding-left: 0px;padding-right: 5px;">内存超配</label>
            <div class="layui-input-inline">
                <input type="text" name="overMemory" value="1.0" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </form>
</script>
<script src="../js/jquery.min.js"></script>
<script src="../js/config_util.js"></script>
<script src="../layui/layui.js"></script>
<script src="../js/util.js"></script>
<script src="../js/table_util.js"></script>
<script src="../js/data_handler.js"></script>
<script src="../js/data_util.js"></script>
<script src="../js/dialog_util.js"></script>
<script>

    config_util.init(()=> {
        window.data_handler  = new data_handler({uri: config_util.base_uri+"/management/cluster", idName: "id"});
        table_util.render({
            elem: "#content",
            idName: "id",
            cols: [
                {width: 80, title: "ID", name: "id"},
                {width: 180, title: "名称", name: "name"},
                {
                    width: 180, title: "CPU超配", name: "overCpu", render: function (data) {
                        return data.overCpu.toFixed(2)
                    }
                },
                {
                    width: 180, title: "内存超配", name: "overMemory", render: function (data) {
                        return data.overMemory.toFixed(2)
                    }
                },
                {
                    width: 180, title: "创建时间", render: function (data) {
                        return dateFormat("YYYY-mm-dd HH:MM:SS", new Date(data.createTime))
                    }
                }
            ],
            menu: [
                {
                    title: "编辑集群", icon: "layui-icon-set", show: function (data) {
                        return true
                    }, click: modify_cluster_click
                },
                {
                    title: "销毁集群", icon: "layui-icon-delete", show: function (data) {
                        return true
                    }, click: delete_cluster_click
                },
            ],
            handler: window.data_handler
        })
    })

    function create_cluster_click() {
        dialog_util.show_modify("#createDialog", "创建集群", "layui-icon-addition", "POST", config_util.base_uri+"/management/cluster/create", undefined, function (response) {
            if (response.code === 0) {
                table_util.append(response.data);
            } else {
                dialog_util.show_tool_tip('添加集群失败，错误码:' + response.code + '。错误信息:' + response.message);
            }
        })
    }

    function modify_cluster_click(data) {
        dialog_util.show_modify("#editDialog", "修改集群", "layui-icon-set", "POST", config_util.base_uri+"/management/cluster/modify", function () {
            $("form[name='modify']").serializeArray().filter(item => data[item.name]).map((item, index) => {
                $(`form[name='modify'] [name='${item.name}']`).val(data[item.name])
            })
        }, function (response) {
            if (response.code === 0) {
                table_util.modify(response.data);
            } else {
                dialog_util.show_tool_tip('修改集群失败，错误码:' + response.code + '。错误信息:' + response.message);
            }
        })
    }

    function delete_cluster_click(data) {
        dialog_util.show_confirm_dialog('确认删除集群', 'POST', config_util.base_uri+"/management/cluster/destroy", {id: data.id}, function (response) {
            if (response.code === 0) {
                table_util.remove(data);
            } else if (response.code) {
                dialog_util.show_tool_tip('删除集群失败，错误码:' + response.code + '。错误信息:' + response.message);
            }
        })
    }




</script>